<template>
  <div class="Szjjsecongpagezongyuzidialog">
    <div @click.prevent="changeradio" style="margin-left: 10px; width: 5%">
      <el-radio v-model="radioV" label="1" v-if="radioV == '1'"
        >显示数据</el-radio
      >
      <el-radio v-model="radioV" label="3" v-else>显示数据</el-radio>
    </div>
    <div style="" class="maindiv">
      <div class="maindivsamll" style="width: 30%">
        <div class="szjytitle">
          <div class="szjytitletext"></div>
          <p>每月中标金额</p>
          <div class="style1">
            <dataPicker
              v-model="myzbjedatepicker"
              type="year"
              placeholder="请选择"
              value-format="yyyy"
              :editable="false"
              prefix-icon="1"
            />
          </div>
          <!-- <div class="jiantoudatepiacker">
            <YYDatePick
              v-model="myzbjedatepicker"
              :to-body="false"
              type="year"
              :popper-options="{ placement: 'bottom' }"
              arrow
            ></YYDatePick>
          </div> -->
          <!-- clearable -->
        </div>
        <div style="height: 80%" class="szjyleftbottomechartheight">
          <Echart
            ref="yearmoney1"
            id="yearmoney"
            :options="szjymyzbjeoptions"
            height="100%"
            width="90%"
          ></Echart>
        </div>
      </div>
      <div class="maindivsamll" style="width: 70%">
        <div class="szjytitle">
          <div class="szjytitletext"></div>
          <p>各单位采购情况</p>
          <!-- <div class="jiantoudatepiacker"> -->
          <!-- <div class="jiantoudatepiacker">
            <YYDatePick
              v-model="gdwcgqkdatepicker"
              type="year"
              :popper-options="{ placement: 'bottom' }"
              arrow
            ></YYDatePick>
          </div> -->
          <div class="style1">
            <dataPicker
              v-model="gdwcgqkdatepicker"
              type="year"
              value-format="yyyy"
              placeholder="请选择"
              :editable="false"
              prefix-icon="1"
            />
          </div>
        </div>
        <div
          style="height: 90%; position: relative"
          class="szjyleftbottomechartheight"
        >
          <div
            class="swiper-container gdwcgqkswiper"
            style="width: 90%; height: 80%; margin-top: 1%"
          >
            <div class="swiper-wrapper" style="z-index: 0">
              <div
                class="swiper-slide"
                v-for="(item, index) in swipwearr"
                :key="index"
              >
                <div
                  class="slidediv"
                  style="background-color: #182c56; color: #fff"
                >
                  <p style="width: 15%">序号</p>
                  <p style="width: 50%; text-align: center">单位</p>
                  <p style="width: 35%">采购金额</p>
                </div>
                <div
                  v-for="(item1, index1) in item"
                  :key="index1"
                  class="slidediv"
                  :style="{
                    visibility: item1.strindex == 'hhh' ? 'hidden' : '',
                  }"
                >
                  <p style="width: 15%">{{ index * 5 + (index1 + 1) }}</p>
                  <p
                    style="
                      width: 55%;
                      text-align: center;
                      color: #2d477e;
                      background-color: #e4eef9;
                    "
                    class="textchuli"
                  >
                    {{ item1.orgname }}
                  </p>
                  <p style="width: 30%">
                    <span v-if="item1.currentyeartotalprice > 99999999">
                      <!-- {{ (item1.currentyeartotalprice / 100000000).toFixed(2)}} -->
                      {{ returnFloat(item1.currentyeartotalprice / 100000000) }}
                      <span style="font-size: 0.6em">亿元</span></span
                    >
                    <span
                      v-else-if="
                        item1.currentyeartotalprice > 9999 &&
                        item1.currentyeartotalprice <= 99999999
                      "
                    >
                      <!-- {{ (item1.currentyeartotalprice / 10000).toFixed(2)}} -->
                      {{ returnFloat(item1.currentyeartotalprice / 10000) }}
                      <span style="font-size: 0.6em">万元</span></span
                    >
                    <span v-else-if="item1.currentyeartotalprice <= 9999"
                      >{{ item1.currentyeartotalprice
                      }}<span style="font-size: 0.6em">元</span></span
                    >
                  </p>
                </div>
              </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" style="left: 0%"></div>
            <div class="swiper-button-next" style="right: 0%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Echart from "@/common/echart";
import Swiper from "swiper/bundle";
import { yearDate, timestampToTime } from "@/utils/common";
import * as echarts from "echarts";
import DatePickerPopover from "@/components/DatePickerPopover.vue";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
export default {
  props: {},
  components: {
    Echart,
    DatePickerPopover,
    YYDatePick,
    dataPicker,
  },
  data() {
    return {
      radioV: "1",
      szjymyzbjeoptions: {},
      myzbjedatepicker: yearDate(),
      gdwcgqkdatepicker: yearDate(),
      swipercurrentindex: 0,
      mySwiperhyjjwcgqk: "",
      swipwearr: [],
      controlshow: false,
      showgdwcgqk: false,
    };
  },
  watch: {
    myzbjedatepicker(newval, oldval) {
      if (!newval) {
        this.myzbjedatepicker = yearDate();
      }
      this.yearBiddingAnalysis(1);
    },
    gdwcgqkdatepicker(newval, oldval) {
      if (!newval) {
        this.gdwcgqkdatepicker = yearDate();
      }
      this.getyearConditionAnalysis();
    },
  },
  mounted() {
    // this.renderswiper();
    this.yearBiddingAnalysis(2);
    this.getyearConditionAnalysis();
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);

      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
    // showTime() {
    //   this.$refs["datePicker1"].focus()
    //   console.log(this.$refs["datePicker1"].pickerVisible)
    // },
    // hiddenTime() {
    //   this.$refs["datePicker1"].blur()
    //   console.log(this.$refs["datePicker1"].pickerVisible)
    // },
    testPage() {
      console.log("trigger focus");
    },

    /**
     * 大佬， 单纯使用el-time-picker，无法实现点击输入框，进行显示与隐藏
     * 可以考虑使用其他方法：
     * 1.写一个div，里面包含一个按钮，使用按钮，调用我的toggleState方法，这个按钮要放在timePicker的上面(使用定位，盖住picker的输入框)，在用户选择时间后，把选择时间赋值给button的innerText
     *
     * 无法使用原因如下：点击picker输入框，只会触发一次focus方法，此后多次点击，也只是触发一次，所以无法在这个方法上下功夫
     *
     * 如果页面存在多个这种选择器，可以考虑对picker进行二次封装
     * that's all
     **/

    toggleState() {
      if (this.controlshow) {
        this.controlshow = false;
        // this.$refs["datePicker1"].blur()
        this.$refs["datePicker1"].hidePicker();
      } else {
        this.controlshow = true;
        this.$refs["datePicker1"].focus();
      }
    },
    handlerClick(event, key) {
      // 触发对象不是时间选择器时，手动关闭时间弹窗
      console.log(
        this.$refs["datePicker" + key],
        'this.$refs["datePicker" + key]'
      );
      console.log("test", this.$refs["datePicker" + key].pickerVisible);
      this.$set(
        this.$refs["datePicker" + key],
        "pickerVisible",
        !this.$refs["datePicker" + key].pickerVisible
      );
      console.log("testAfter", this.$refs["datePicker" + key].pickerVisible);
      // if (event.target._prevClass !== "el-input__inner") {
      //   // this.controlshow = !this.controlshow;
      //   if (this.$refs[`datePicker${key}`].pickerVisible) {
      //     console.log(111111);
      //     // this.$refs["datePicker" + key].handleClose();
      //     this.$refs["datePicker" + key].blur();
      //     // this.$refs["datePicker" + key].pickerVisible = false;
      //     // this.controlshow = false
      //   }else {
      //     console.log(2222222);
      //     // this.$refs["datePicker" + key].pickerVisible = true;
      //     this.$refs["datePicker" + key].focus();
      //     // this.controlshow = true
      //   }
      // }
    },
    // handlerClick(event, key) {
    //   // 触发对象不是时间选择器时，手动关闭时间弹窗
    //   console.log(this.$refs["datePicker" + key],'this.$refs["datePicker" + key]')
    //   if (event.target._prevClass !== "el-input__inner") {
    //     this.controlshow = !this.controlshow;
    //     if (this.controlshow) {
    //       console.log(111111);
    //       // this.$refs["datePicker" + key].handleClose();
    //       this.$refs["datePicker" + key].blur();
    //       this.$refs["datePicker" + key].pickerVisible = false;

    //     } else {
    //       console.log(2222222);
    //       this.$refs["datePicker" + key].pickerVisible = true;
    //       this.$refs["datePicker" + key].focus();
    //     }
    //   }
    // },
    getyearConditionAnalysis(index) {
      let datass = [];
      if (this.$store.state.orgType == 0) {
        APIS.Szjy.yearConditionAnalysis({ year: this.gdwcgqkdatepicker }).then(
          (res) => {
            const data = res.data ? res.data : [];
            const dataC = data.filter((item) => {
              return (
                item.orgname != "浙建总承包" && item.orgname != "浙建工程公司"
              );
            });
            dataC.map((item, index) => {
              //浙建总承包及浙建工程公司
              item.strindex = index + 1;
              datass.push(item);
              // xgdwcgedata.push(item.orgname)
              // ygdwcgedata.push((item.currentyeartotalprice / 100000000).toFixed(2))
              if (index == dataC.length - 1) {
                this.renderswiper(datass);
              }
            });
          }
        );
      } else {
        // yearSonConditionAnalysis
        APIS.Szjy.yearSonConditionAnalysis({
          year: this.gdwcgqkdatepicker,
        }).then((res) => {
          const data = res.data ? res.data : [];
          const dataC = data.filter((item) => {
            return (
              item.orgname != "浙建总承包" && item.orgname != "浙建工程公司"
            );
          });
          dataC.map((item, index) => {
            //浙建总承包及浙建工程公司
            item.strindex = index + 1;
            datass.push(item);
            // xgdwcgedata.push(item.orgname)
            // ygdwcgedata.push((item.currentyeartotalprice / 100000000).toFixed(2))
            if (index == dataC.length - 1) {
              this.renderswiper(datass);
            }
          });
        });
      }
    },
    renderswiper(arr) {
      // let arr = [
      //   1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 45, 6, 7, 8, 90, 0, 12, 23, 34,
      //   45, 56, 67, 78, 89,
      // ];
      this.swipwearr = this.listToMatrix(arr, 5);
      let leng = this.swipwearr.length - 1;
      if (this.swipwearr[leng].length < 5) {
        let num = 5 - this.swipwearr[leng].length;
        console.log("xiaoyu", num);
        for (let i = 0; i < num; i++) {
          this.swipwearr[leng].push({ strindex: "hhh" });
        }
      }
      console.log(this.swipwearr, "arr");
      if (this.swipercurrentindex) {
        this.mySwiperhyjjwcgqk.slideTo(0, 1000, false);
      } else {
        this.mySwiperhyjjwcgqk = new Swiper(".gdwcgqkswiper", {
          // direction: 'vertical',
          slidesPerView: 2, //swiper容器同时展示的元素数量
          pagination: {
            el: ".swiper-pagination",
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          observeSlideChildren: true,
        });
      }
      this.swipercurrentindex++;
    },
    changeradio() {
      console.log(this.radioV, 111);
      let myChart = echarts.init(document.getElementById("yearmoney"));
      let labels1 = {
        show: true,
        position: "top",
        textStyle: {
          color: "black",
          fontSize: 10,
        },
      };
      let labels2 = {
        show: false,
        position: "top",
        textStyle: {
          color: "black",
          fontSize: 10,
        },
      };
      if (this.radioV == "1") {
        this.radioV = "2";
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  color: "#182c56",
                  label: labels2,
                },
              },
            },
          ],
        });
      } else {
        this.radioV = "1";
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  color: "#182c56",
                  label: labels1,
                },
              },
            },
          ],
        });
      }
    },
    yearBiddingAnalysis(index) {
      let xyeardata = [];
      let yyeardata = [];
      let labels = {
        show: true,
        interval: 0,
        // 更改x轴文字颜色的配置
        textStyle: {
          color: "#333333", //处理x轴的文字颜色【粉色】
        },
      };
      let labels1 = {};

      if (window.devicePixelRatio == 1.5) {
        labels1 = {
          show: true,
          position: "top",
          textStyle: {
            color: "black",
            fontSize: 8,
          },
        };
      } else {
        labels1 = {
          show: true,
          position: "top",
          textStyle: {
            color: "black",
            fontSize: 10,
          },
        };
      }

      APIS.Szjy.yearBiddingAnalysis({ year: this.myzbjedatepicker })
        .then((res) => {
          // for (let key in res.data) {
          //   xyeardata.push(key);
          //   yyeardata.push((res.data[key] / 100000000).toFixed(2));
          // }
          res.data.map((item) => {
            xyeardata.push(item.MONTH);
            // yyeardata.push((item.totalprice / 100000000).toFixed(2));
            yyeardata.push(this.returnFloat(item.totalprice / 100000000));
          });
          if (index == 1) {
            let myChart = echarts.init(document.getElementById("yearmoney"));
            myChart.setOption({
              xAxis: {
                data: xyeardata,
              },
              series: [
                {
                  data: yyeardata,
                },
              ],
            });
          } else {
            this.renderszjymyzbjeoptions(xyeardata, yyeardata, labels, labels1);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    renderszjymyzbjeoptions(xdata, arr1, labelstyle, labels) {
      this.szjymyzbjeoptions = {
        grid: {
          top: "20px",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          formatter(params) {
            for (let x in params) {
              return (
                params[x].marker +
                params[x].name +
                "月:    " +
                params[x].data +
                "亿元"
              );
            }
          },
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: labelstyle,
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "累计采购金额",
            type: "bar",
            barWidth: 10,
            barGap: 10,
            itemStyle: {
              normal: {
                color: "#182c56",
                label: labels,
              },
            },
            data: arr1,
          },
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.yearmoney1.resize();
      });
    },
    openTrue(val) {
      console.log(val);
    },
    // 数组变二维数组方法
    listToMatrix(list, elementsPerSubArray) {
      var matrix = [],
        i,
        k;

      for (i = 0, k = -1; i < list.length; i++) {
        if (i % elementsPerSubArray === 0) {
          k++;
          matrix[k] = [];
        }

        matrix[k].push(list[i]);
      }

      return matrix;
    },
  },
};
</script>
 
<style lang="scss" scoped>
.Szjjsecongpagezongyuzidialog {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .maindiv {
    height: 92%;
    display: flex;
    .maindivsamll {
      width: 50%;
      height: 100%;
      .szjytitle {
        display: flex;
        align-items: center;
        .szjytitletext {
          width: 0px;
          height: 0.95rem;
          border: 0.1rem solid #192c55;
          margin-right: 0.25rem;
        }
      }
    }
  }
  .swiper-slide {
    text-align: center;
    border-bottom: 0.1rem solid #182c56;
    width: 99%;
    display: flex;
    flex-direction: column;

    div {
      width: 100%;
      display: flex;
      align-items: center;
    }
    .slidediv {
      height: 16.6%;
      text-align: center;
      border-bottom: 0.1rem solid #182c56;
      width: 99%;
      display: flex;
    }
  }
  .swiper-slide-active {
    color: #182c56;
  }
  .gdwcgqkswiper {
    position: static;
  }
}

::v-deep .style1 {
  height: 1.4rem;
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.5rem) !important;
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    display: none;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
    height: 1.2rem;
  }
}
</style>
 

